<!DOCTYPE html>
<html>
<head th:include="vue-element :: header"></head>
<body>
<div id="vm" v-cloak>
    <el-container>
        <el-main>
                <div>
                    <el-button  type="primary" @click="getCheckedNodes" style="margin-left: 85%;">确认选择</el-button>
                </div>
                <el-tree
                        :props="props"
                        :load="loadNode"
                        node-key="id"
                        ref="tree"
                        highlight-current
                        lazy
                        show-checkbox
                        :default-checked-keys="specsIds"
                        @node-click="handleNodeClick">
                </el-tree>
        </el-main>
    </el-container>
</div>
<div th:include="vue-element :: footer"></div>
<script th:inline="javascript">
    const vm = new Vue({
        el: '#vm',
        data: {
            specsIds: [[${specsIds}]],
            specsId: [[${specsIds}]],
            props: {
                label: "name",//这里是树结构中需显示的数据（即接口返回的需展示在页面上的参数）
                children: [],
                isLeaf: "leaf",
            }
        },
        methods: {
            getCheckedNodes() {
                console.log(this.$refs.tree.getCheckedNodes());
                var node = this.$refs.tree.getCheckedNodes();
                console.log(" getCheckedNodes",node);
                var specsId = [];
                var specsName = [];
                if (node.length > 0) {
                    node.forEach(value => {
                        if (value.leaf == true) {
                        specsId.push(value.id);
                        specsName.push(value.name);
                    }
                })
                    if (specsId != null) {
                        console.log("specsId",specsId);
                        parent.$("#specsIds").val(specsId);
                        parent.$("#specsName").val(specsName);
                        //--关闭 当前页面 开始--
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        //--关闭 当前页面 结束--
                    } else {
                        alert("请选择规格");
                        return;
                    }
                }else {
                    alert("请选择规格");
                    return;
                }
            },
            handleNodeClick(data) {
                console.log("node", data);
            },
            // 异步树叶子节点懒加载逻辑
            loadNode(node, resolve) {
                console.log('node ...', node);
                console.log(resolve);
                // 一级节点处理
                if (node.level === 0) {
                    console.log("node.level.....==0");
                    this.requestTree(node, resolve);
                }
                // 其余节点处理
                if (node.level >= 1) {
                    console.log("node.level.....>1",node);
                    node.data.disabled = false;
                    // 注意！把resolve传到你自己的异步中去
                    this.getIndex(node, resolve);
                }
            },
            // 异步加载叶子节点数据函数
            getIndex(node, resolve) {
                //console.log('getIndex =====', node);
                const  that = this;
                var param = {
                    specsId: node.data.id
                };
                //console.log('getIndex param =====', param);
                console.log(123123);
                var url = "/app/product/getSpecsTreeList";
                axios.post(url, param, {
                    headers: {'x-requested-with': 'XMLHttpRequest'}
                })
                    .then(out => {
                        console.log(this.specsIds);
                        console.log(out.data);
                        // 此处需要后台传过来一个值来判断每个节点有无子节点,实际项目中必须加上（如isRealLeaf），不传都默认为叶子节点
                        out.data.forEach(value => {
                            if (value.parent === true) {
                                value.leaf = false//不为叶子节点
                                value.disabled=true
                            } else {
                                value.leaf = true//为叶子节点
                                value.disabled=false
                            }
                        })
                        var arr=[];
                       var c= arr.concat(this.specsId)
                        this.specsIds = c;
                        console.log(c);
                        console.log(' this.specsIds; ====', this.specsIds);
                        let data = out.data;
                        resolve(data);
                    })
                    .catch(error => {
                    });

            },

            // 首次加载一级节点数据函数
            requestTree(node, resolve) {
                const  that = this;
                var param = {
                    specsId: 0
                };
                var url = "/app/product/getSpecsTreeList";
                axios.post(url, param, {
                    headers: {'x-requested-with': 'XMLHttpRequest'}
                })
                    .then(out => {
                        console.log(out.data);
                        // 此处需要后台传过来一个值来判断每个节点有无子节点,实际项目中必须加上（如isRealLeaf），不传都默认为叶子节点
                        out.data.forEach(value => {
                            if (value.parent === true) {
                                value.leaf = false //不为叶子节点
                                value.disabled=true
                            } else {
                                value.leaf = true //为叶子节点
                                value.disabled=true
                            }
                        })
                        let data = out.data;
                        resolve(data);
                    })
                    .catch(error => {
                    });
                console.log("disable.....", node);
            },
        }
    });
</script>
</body>
</html>